<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
  <meta charset="utf-8">
  <title>视频检索</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/p.ico}" media="screen" />
  <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all" />
</head>
<body>
<div class="layui-layout-admin">
<!-- 引入导航代码  -->
<div th:include="navigation :: navigation"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px; text-align: center;">
  <legend>视频搜索</legend>
</fieldset>
    <div class="layui-form-item" style="padding-left: 1%">
  搜索视频：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="searchInput" autocomplete="on">
  </div>
 类型选择：
      <select style="margin-left: 0;" class="layui-input-block" name="interest" lay-filter="aihao" id="vedioType">
       <option value="">请选择</option>
       <option value="1">电影</option>
       <option value="2">电视剧</option>
      </select>
  &nbsp; <button class="layui-btn" data-type="reload" id="searchVedio">搜索</button>
</div>
<table class="layui-hide" id="show"></table>

</div>
</body>
<script src="../layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script src="../jquery/jquery-3.3.1.min.js" th:src="@{/jquery/jquery-3.3.1.min.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/navigation.js" th:src="@{/js/navigation.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/  
	$(function(){
		
	var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;  
// 导航
layui.use('element', function(){
	  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
	  
	  //监听导航点击
	  element.on('nav(demo)', function(elem){
	    layer.msg(elem.text());
	  });
	});

layui.use('table', function(){
	  var table = layui.table;
	  
	  var $ = layui.$,
		active = {
			    reload: function(){
			      var searchInput = $('#searchInput'),
			      vedioType = $('#vedioType');
			      //执行重载
			      table.reload('show', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			        	  vedioName: searchInput.val(),
			        	  vedioType: vedioType.val()
			        }
			      });
			    }
			  };
	  
	  // 点击搜索按钮
	  $('#searchVedio').on('click', function() {
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
	
	  //展示已知数据
	  table.render({
	    elem: '#show'
	    ,url: '/showVedio'
	    ,id: 'show'
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,cols: [
	    	[ //标题栏
	      {field: 'vedioName', title: '视频名称', align: 'center'}
	      ,{field: 'vedioType', title: '视频类型', align: 'center'}
	      ,{field: 'vedioUrl', title: '视频观看链接(请点击)', align: 'center'}
	    ]
	    	]
	    ,skin: 'line' //表格风格
	    ,even: true
	    ,page: true //是否显示分页
	    ,limits: [15, 20, 25]
	    ,limit: 15 //每页默认显示的数量
	    ,done: function(res, page, count) {
	  	//分类显示中文名称  
	    $("[data-field='vedioType']").children().each(function(){  
	            if($(this).text()=='1'){  
	               $(this).text("电影")  
	            }else if($(this).text()=='2'){  
	               $(this).text("电视剧")
	            }
	    })  
	    
	    }
	  });
	});
	

});

/*]]>*/
</script>

</html>